<template>
  <view class="yaogua-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />
    <view class="title">卜卦方法：静默一分钟，心念集中于你所测之事，如爱情、事业、健康等，然后心念一动，点击立即摇卦，掷出金钱卦，并查看卦辞，请自行体会其中的吉凶指示。</view>

    <view class="image-wrapper">
      <image
        v-for="ls in 6"
        :key="ls"
        class="img"
        src="https://ai-sbbs.xyz/api/profile/upload/2024/07/02/90828e6a30384504adcb80bb35c741b3.gif"
        mode="scaleToFill"
      />
    </view>

    <view class="btn">
      <tui-form-button
        style="margin-left:8px"
        height="40px"
        background="#c09351"
        @click="handerBtn"
      >立即摇卦</tui-form-button>
    </view>
  </view>
</template>

<script>
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],

  methods: {
    handerBtn() {
      uni.navigateTo({
        url: `/pqgeInfo/yaogua/yaoguaInfo`
      });
    }
  }
};
</script>

<style lang="scss">
.yaogua-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;

  padding: 12px;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .img {
      display: inline-block;
      width: 42px;
      height: 42px;
      margin-right: 4px;
    }
  }

  .btn {
    position: relative;
    z-index: 2;
    margin-top: 20px;
  }
}
</style>